import React, {Component} from "react";

export default class App extends Component {

  state = {
    firstName: '张',
    lastName: '一'
  }

  changeFirstName(e){
    // console.log(e.target.value);
    this.setState({
      firstName: e.target.value
    })
  }
  changeLasttName(e){
    this.setState({
      lastName: e.target.value
    })
  }

  render() {

    return (<div>
        <h1> {this.state.firstName}{this.state.lastName}说： 今天是周 4 ，周六还会远吗 </h1>

        {/* 该输入框不能输入任何内容 */}
        {/* <input type="text" value={this.state.firstName} /> */}
        {/*
          如果你给输入框设置了 value 属性，就一定要给其添加一个 onChange 事件，否则
          该输入框为只读，无法输入任何内容
          如果说你是需要设置一个默认值，那么你可以通过 defaultValue 进行设置默认值
        */}

        {/* 单纯的默认值，当输入框内容发生改变时，不会影响到 firstName */}
        {/* <input type="text" defaultValue={this.state.firstName} /> */}

        {/* 该写法叫受控表单，有 value 代表是受控，没有 value 就是非受控 */}
        <input type="text" value={this.state.firstName} onChange={(e)=>{this.changeFirstName(e)}} />

        <input type="text" value={this.state.lastName} onChange={(e)=>{this.changeLasttName(e)}} />

    </div>)
  }
}
